<script setup lang="ts">
import { useRouter } from 'vue-router';
import post from '../../lib/post'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus';
// import { useUserInfoStore } from '@/stores/userInfo';   //导入用户信息状态库
// import { storeToRefs } from 'pinia'
// const userInfoStore = useUserInfoStore()
// const { userId } = storeToRefs(userInfoStore)

const phone = ref('17858984792')
const password = ref('123456')
const repeatPassword = ref('123456')
const router = useRouter()

const toResetPassword = async () => {
    if (password.value !== repeatPassword.value) {
        return ElMessageBox.alert('两次输入密码不一致')
    } else {
        // 发起请求去修改密码
        const data: any = await post('/modify/member', {
            search: {
                phone: phone.value,
            },
            password: password.value

        })
        if (!data.success) {
            return ElMessageBox.alert(data.message)
        } else {
            router.push('/login')
            return ElMessageBox.alert('修改密码成功，为你跳转至登录页')
        }
    }


}




</script>

<template>
    <div class="big">
        <div class="left"></div>
        <div class="right">
            <div class="form">
                <h1 class="title">重置密码</h1>

                <div class="input">
                    <p>手机号</p><input v-model="phone" class="username" type="text" placeholder="请输入手机号码">
                </div>
                <div class="input">
                    <p>密码</p><input v-model="password" class="password" type="password" placeholder="请输入密码">
                </div>
                <div class="input">
                    <p>重复密码</p><input v-model="repeatPassword" class="password" type="password" placeholder="请重复密码">
                </div>



                <div class="else">
                    <div class="elseLeft">
                        <div class="toRegister">注册页面</div>
                    </div>
                    <!-- <div class="elseRight">
                        <span>忘记密码</span>
                    </div> -->
                </div>
                <button class="toLogin" @click="toResetPassword">重置密码</button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.big {
    display: flex;
}

.left {
    width: 50vw;
    height: 100vh;
    background-color: #1081d6;
    border-radius: 0 1vw 1vw 0;
    /* background: url(../../assets/img/bgimg01.jpg) -50px 0; */
}

.toRegister {
    cursor: pointer;
}

.input input {
    margin: 10px 0;
}

.username,
.password {
    display: block;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    text-indent: 1rem;
}

.username::placeholder,
.password::placeholder {
    text-indent: 1rem;
    color: #bbb;
    font-size: 16px;
}

.right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.right .form {
    box-sizing: border-box;
    width: 500px;
    height: 600px;
    /* background-color: #1081d6; */
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 50px 80px;
}

h1 {
    color: #1081d6;
    margin-bottom: 40px;
    font-size: 40px;
}

p {
    font-size: 18px;
    font-weight: 500;
}

.else {
    display: flex;
    justify-content: space-between;
    color: #1081d6;
    font-weight: 500;
}

.toLogin {
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    margin-top: 30px;
    width: 100%;
    height: 50px;
    background-color: #1081d6;
    border-radius: 4px;
    border: 0;
}
</style>